<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <link rel="stylesheet" href="../../static/css/main.css">
    <link rel="stylesheet" href="../../static/css/public.css">
    <script src="../../static/js/jquery-3.4.1.min.js"></script>
    <script src="../../static/layui/layui.js"></script>
    <style>
        .center-in-center{
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>

<div id="gb">
    <fieldset class="layui-elem-field layui-field-title" style="margin-left: 50px; font-size: 50px">
        <legend>注册中心</legend>
    </fieldset>
    <form class="layui-form center-in-center">

        <div class="layui-form-item">
            <label class="layui-form-label">用户账号</label>
            <div class="layui-input-inline">
                <input type="text" name="username" required lay-verify="required" placeholder="请输入账号" autocomplete="off"
                       value="" class="layui-input" id="username">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input" id="pass1">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-inline">
                <input type="password" name="passwords" required lay-verify="pass" placeholder="请再次输入密码" autocomplete="off" class="layui-input" id="pass2">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">注册</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

</div>
</body>
<script>

    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;
        //…
    });

    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }

                //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
                if(value === 'xxx'){
                    alert('用户名不能为敏感词');
                    return true;
                }
            },
            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            pass: function (value, item) {
                if(/^[\S]{6,12}$/.test(value) == false) return '密码必须6到12位，且不能出现空格';
                //验证输入的密码是否相同；
                var pass1 = $("#pass1").val();
                var pass2 = $("#pass2").val();
                if(pass1 != pass2) {
                    $("#pass2").val("");
                    return "两次输入的密码不一致";
                }
            }

        });

        form.on('submit(formDemo)', function(){
            var adminsubmit = {
                "username" : document.getElementById('username').value,
                "password" : document.getElementById('pass1').value,
            }
            layer.confirm('确定注册吗？', {
                btn: ['是的','取消'] //按钮
            }, function(){
                console.log(adminsubmit);
                $.ajax({
                    url: 'http://localhost:8080/register',
                    type: 'POST',
                    contentType : 'application/json',
                    dataType: 'json',
                    data: JSON.stringify(adminsubmit),
                    success(res){
                        var obj = JSON.stringify(res);

                        // alert(Object.keys(obj)[0]);
                        if(Object.keys(obj)[0] == 0)layer.msg("修改成功", {icon: '1', time: 2000});
                        else layer.msg("修改失败", {icon: '2', time: 2000});
                    },
                    error(){
                        layer.msg('用户名已经存在！', {
                            time: 1000, //不自动关闭
                            icon: 'layui-icon-ok',
                        });
                    }
                })
            }, function(){
                layer.msg('已取消', {
                    time: 2000
                });
            });
            return false;
        })
    })
</script>
</html>